<template>
  <div id="app">
    <header-component></header-component>
    <transition :name="transitionName" v-if="$route.meta.keepAlive">
        <keep-alive>
          <router-view :key="key"></router-view>
        </keep-alive>
    </transition>
    <transition :name="transitionName" v-if="!$route.meta.keepAlive">
        <router-view :key="key"></router-view>
    </transition>
    <foot-component v-if="footShow"></foot-component>
  </div>
</template>

<script>
import HeaderComponent from '@/common/Header.vue'
import FootComponent from '@/common/Footer.vue'
export default {
  name: 'App',
  components: {
    HeaderComponent,
    FootComponent
  },
  data ( ) {
    return {
      transitionName: 'slide-left',
      footShow: true    
    }
  },
  computed: {
    key() {
        return this.$route.path.replace(/\//g, '_')
    },    
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      if ( to.path.indexOf('/travel/') != -1 || to.path.indexOf('/acti') != -1 ) {
         this.footShow = false
      } else {
        this.footShow = true
      }      
    }
  }  
}
</script>

<style lang="css">
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  width:100%;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.fade-enter{
  opacity:0;

}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave{
  opacity:1;
}
.fade-leave-active{
  opacity:0;
  transition: opacity .5s;
}
#app {
  width: 100%;  
  height: 100%;
  background: #fff;  
  overflow: auto;  
  -webkit-overflow-scrolling: touch;  
  position: absolute;  
  left:0;  
  top:0;  
}
</style>
